<template>
  <div class="search">
    <!-- 头部搜索区域 -->
    <div class="header"><Header></Header></div>

    <!-- 内容展示区域 -->
    <div class="content">
      <van-empty
        description="快来搜索吧"
        image="search"
        v-if="searchInfo.length === 0"
      />
      <div
        class="item"
        @click="getItemId(item.good_id)"
        v-for="(item, index) in searchInfo"
        :key="index"
      >
        <!-- 商品图片区域 -->
        <div class="pic">
          <img :src="item.shopImgUrl" alt="" />
        </div>
        <!-- 商品右侧信息区域 -->
        <div class="shopmessage">
          <div class="msg">
            {{ item.good_describe }}
          </div>
          <div class="price">￥{{ item.price }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters, mapState, mapActions } from "vuex"
import Header from "@/components/search/Header"

export default {
  components: {
    Header,
  },

  beforeDestroy() {
    this.delsearchShop()
  },
  data() {
    return {
      value: "",
    }
  },

  methods: {
    // 点击item获取id
    getItemId(id) {
      console.log(id)
      this.$router.push({
        path: "/goodsdetaillist",
        query: {
          id,
        },
      })
    },

    ...mapMutations(["loginOut", "userInit", "delsearchShop"]),
  },

  computed: {
    ...mapState({
      loginStatus: (state) => state.user.loginStatus,
      userInfo: (state) => state.user.userInfo,
      list: (state) => state.cart.list,
      searchInfo: (state) => state.search.searchInfo,
    }),
  },
}
</script>

<style lang="less" scoped>
.search {
  width: 100vw;
  background-color: rgb(240, 240, 240);

  // 头部fixed处理，不太合理。后期修改
  .header {
    height: 44px /* 44/16 */;
    Header {
      position: fixed;
    }
  }

  .content {
    padding: 0.625rem /* 10/16 */;
    height: 100vh;
    overflow: hidden;

    .item {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 9.375rem /* 150/16 */;
      background-color: #fff;
      margin: 0.625rem /* 10/16 */ auto;
      border-radius: 0.625rem /* 10/16 */;

      // 商品图片
      .pic {
        width: 8.125rem /* 130/16 */;
        height: 100%;
        border-radius: 0.625rem /* 10/16 */;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 0.625rem /* 10/16 */;
        }
      }
      // 商品信息
      .shopmessage {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        flex: 1;
        padding: 0.625rem /* 10/16 */;
        width: 6.25rem /* 100/16 */;
        height: 100%;
        // background-color: yellow;

        .msg {
          word-wrap: break-word;
          text-overflow: ellipsis; /* 将文本溢出显示... */
          overflow: hidden; /* 超出隐藏 */
          word-break: break-all; /* break-all(允许在单词内换行) */
          display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
          -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
          -webkit-line-clamp: 2; /* 呈现几行 我这里设置两行,可自行调试 */
        }

        .price {
          font-size: 1.25rem /* 20/16 */;
          color: red;
        }
      }
    }
  }
}
</style>
